<template>
  <div>
    <!--    多条件查询-->
    <div style="padding: 20px; background-color: #f5f7fa; border-radius: 8px">
      <el-form>
        <el-row>
          <el-col :span="5">
            <el-form-item label="供应商公司名称:">
              <el-input
                v-model="filters.name"
                placeholder="请输入"
                @clear="initData"
              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="销售联系人:">
              <el-input
                v-model="filters.salesContact"
                placeholder="请输入"
                @clear="initData"
              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="销售联系电话:">
              <el-input
                v-model="filters.salesNub"
                placeholder="请输入"
                @clear="initData"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="initData">查询</el-button>
            <el-button type="primary" @click="reset">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!--    功能按钮-->
    <div style="text-align: right">
      <el-button type="primary" @click="add">添加</el-button>
    </div>
    <!--   供应商列表-->
    <el-table :data="tableData" style="width: 100%" stripe border>
      <el-table-column
        prop="name"
        label="供应商公司名称"
        width="150"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="SalesContact"
        label="销售联系人"
        width="180"
        header-align="center"
      />
      <el-table-column
        prop="SalesNub"
        label="销售联系电话"
        width="180"
        header-align="center"
      />
      <el-table-column
        prop="s_category_id"
        label="主营产品类型"
        width="120"
        header-align="center"
      />
      <el-table-column
        prop="factor"
        label="报价系数"
        width="120"
        header-align="center"
      />
      <el-table-column
        prop="customer_type"
        label="交付率"
        width="120"
        header-align="center"
      />
      <el-table-column
        prop="customer_email"
        label="质量投诉率"
        width="120"
        header-align="center"
      />
      <el-table-column
        prop="createdTime"
        label="延误交付率"
        width="120"
        header-align="center"
      />
      <el-table-column
        prop="saleId"
        label="年度采购金额"
        width="120"
        header-align="center"
      />
      <el-table-column
        prop="source"
        label="帐号状态(启用/禁用)"
        width="120"
        header-align="center"
      />
      <el-table-column label="操作" header-align="center" align="center">
        <template v-slot="{ row }">
          <el-button type="primary" title="修改" @click="update(row.id)"
            >编辑</el-button
          >
          <el-button type="primary">重置密码</el-button>
          <el-button type="primary" @click="det(row.id)">删除</el-button>
          <el-button type="primary">累计采购</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--        分页-->
    <div
      style="
        background-color: #fff;
        height: 50px;
        line-height: 50px;
        text-align: right;
      "
    >
      <el-pagination
        background
        :page-sizes="[1, 10, 20, 30, 40, 50, 100]"
        :page-size="pageSize"
        layout="total,sizes,prev, pager, next,jumper"
        :total="total"
        @size-change="chgsize"
        @current-change="chgpg"
      />
    </div>
  </div>
</template>

<!--vue 组件选项定义-->
<script setup>
import { ref, onMounted } from "vue";
//引入api
import { querySupplier } from "@/api/supplier.js";
//引入图标
import { Delete, Edit } from "@element-plus/icons-vue";
//引入路由
import { useRouter } from "vue-router";
import { detData } from "@/api/supplier.js";
import { ElMessage, ElMessageBox } from "element-plus";
import axios from "axios";
//表格数据
const tableData = ref([{ company: "sss" }]);
//路由实例
const router = useRouter();

//查询过滤条件
const filters = ref({
  name: "",
  salesContact: "",
  salesNub: ""
});

//重置
function reset() {
  filters.value = {
    name: "",
    salesContact: "",
    salesNub: ""
  };
  initData();
}

//添加客户
function add() {
  router.push("/supplier/add");
}

//分页信息
const pageNum = ref(1); //当前页 默认第1页
const pageSize = ref(10); //每页记录数
const total = ref(0); //总记录数

//每页记录数变化
function chgsize(size) {
  //更改每页记录数
  pageSize.value = size;
  console.log("size>>>", size);
  //从每页开始查询
  pageNum.value = 1;
  //查询数据
  initData();
}
//页面发生变化
function chgpg(pg) {
  //更改当前页
  pageNum.value = pg;
  console.log("pageNum>>>", pageNum.value);
  //查询数据
  initData();
}
//修改
function update(id) {
  //console.log("id>>>", id);
  router.push({ path: "/supplier/update", query: { id } });
}
//删除
function det(id) {
  ElMessageBox.confirm("是否删除该供应商?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      console.log("id>>>", id);
      detDataId(id);
    })
    .catch(() => {
      ElMessageBox.alert("已取消删除", "提示", { type: "info" });
    });
}
//
async function detDataId(id) {
  console.log("id>>>", id);
  let res = await detData(id);
  if (res.code == 200) {
    ElMessage({
      type: "success",
      message: "删除成功!"
    });
    await initData();
  }
}

//查询数据
async function initData() {
  //请求
  let data = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    name: filters.value.name,
    salesContact: filters.value.salesContact,
    salesNub: filters.value.salesNub
  };
  console.log("data>>>", data);
  let res = await querySupplier(data);
  if (res.code == 200) {
    tableData.value = res.data.data;
    //接收分页信息
    pageNum.value = res.data.pageNum;
    pageSize.value = res.data.pageSize;
    total.value = res.data.total;
  }
}

//生命周期钩子
onMounted(() => {
  initData();
});
</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped></style>
